/**
 * 单项选择/多项选择
 * 
 * @author Gill Gong
 */

import React from "react"
import { View, Text } from "react-native"
//import console = require("console");

class CheckBoxGroup extends React.Component {

  constructor(options) {
    super(options)

    this.state = {
      selected: null
    }
  }

  render() {
    let activeCls = {
      borderColor: "#2196f3",
      backgroundColor: "#2196f3"
    }
    let activeTextCls = {
      color: "#fff"
    }

    return (
      <View style={{ display: "flex", flexDirection: "row" }}>
        {
          _.map(this.props.items, (item, index)=>{
            return (
              <View
              key={ index } 
              style={[ 
                { marginRight: 20, borderColor: "#666", borderWidth: 2, padding: 8, borderRadius: 4 } ,
                this.state.selected === item.value? activeCls:null
              ]}>
                <Text
                onPress={ ()=>{ this.onSelectionHandler(item) } }
                style={[{ fontSize: 16, fontWeight: "bold" }, this.state.selected === item.value? activeTextCls:null ]}>{ item.display }</Text>
              </View>
            )
          })
        }
      </View>
    )
  }

  componentDidMount() {

    if(this.props.value) {
      this.setState({ selected: this.props.value })
    }
  }

  onSelectionHandler(item) {

    this.setState({ selected: item.value })
    if(_.isFunction(this.props.onSelectionHandler)) {
      this.props.onSelectionHandler(item)
    }
  }
}

export default CheckBoxGroup
